<template>
  <div class="singlepage" v-if="status === '2' || (status === '1' && step && step !== 'a')">
    <p-tabs v-model="activeName">
      <p-tab-pane key="first" tab="流程记录">
        <record
          :step="step"
          :status="status"
          :process-instance-id="processInstanceId"
          :task-id="taskId"/>
        <dealWith :task-id="taskId" :step="step" v-if="status === '1'"/>
      </p-tab-pane>
      <p-tab-pane key="second" tab="流程图" force-render>
        <div class="processPreview" v-if="activeName === 'second'">
          <iframCom :process-instance-id="processInstanceId" />
        </div>
      </p-tab-pane>
    </p-tabs>
  </div>
</template>
<script>
import dealWith from './dealWith.vue'
import record from '../../../processHost/platform/pc/record.vue'
import iframCom from '../../../processHost/platform/pc/iframCom.vue'
export default {
  props: {
    step: { type: String, default: '' },
    status: { type: String, default: '' },
    processInstanceId: { type: String, default: '' },
    taskId: { type: String, default: '' },
  },
  components: {
    record,
    dealWith,
    iframCom,
  },
  data () {
    return {
      activeName: 'first',
    }
  }
}
</script>
<style scoped lang="less">
.singlepage{
  height: calc(100% - 21px);
  padding-top: 30px;
  }
.processPreview{
  padding-top: 10px;
  overflow: hidden;
}
</style>
